<template>
  <div>
     <span>全选:</span>
    <input type="checkbox" v-model="fn" />
    <button @click="fan">反选</button>
    <ul>
      <li  v-for="item in arr" :key="item.name">
        <input type="checkbox"  v-model="item.c" />
        <span>{{item.name}}</span>
      </li>
    </ul>
   </div>
</template>
 
<script>
export default {

  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    };
  },
  computed: {
    fn:{
      get(){
        /*every这个数组方法方法  每一项都为true了,  return 才会返回true, 全选复选框才为true
         get利用fn这个属性把通过v-modle 把 true 这个值传给了全选的复选框  */
      return  this.arr.every(item => item.c === true)
    },
    /* 只有fn改变了，才会用到set set的括号里要接这个值  因为不会向外给值所以不用写return 
       再把这个值赋值给每一项  达到全选选中 影响每一个的效果
    */
    set(value){
     this.arr.forEach(item =>item.c =value)
    }
    }
  },
  methods: {
    /* 点击反选 达到效果。 绑定点击事件，所以用forEach 遍历，把每一项都取反 */
    fan(){
    return  this.arr.forEach(item => item.c = !item.c)
    }
  }
};
</script>

<style scoped>
  /* 利用v-modle把这两个input框建立起联系，v-modle（v-modle:value）获取的是input框里面的值  get 是给  */   
</style>
